<template>
	<view >
		<u-navbar leftIconColor="#000000" :titleStyle="{ color: '#000000' }" :bgColor="bgColor" title="下级价格设置"
			:placeholder="true" :autoBack="true"></u-navbar>
		<view class="note">
		
		</view>
		<view class="" style="width: 92%;margin:0 auto;position: relative;z-index: 1;padding-top: 15px;">
			<view class="flex"
				style="padding: 20px 15px; justify-content: space-between; background: #ffffff; border-radius: 10px">
				<view class="flex">
					<image style="width: 18px;height: 18px;margin-right: 12px;" src="/static/font/62.png" mode=""></image>
					<view style="font-size: 14px; color: #1d1f20; font-weight: 400">一键设置下级抽成比例：</view>
					<view style="font-size: 14px; color: #ff3331; font-weight: 400">{{ info.tackPercentage }}%</view>
				</view>
				<u-icon name="arrow-right" @click="show = true" size="16"></u-icon>
				<!-- <view 
					style="padding: 5px 15px; border-radius: 5px; background-color: #ff3331; color: #ffffff; font-size: 14px">
					修改
				</view> -->
			</view>
			<view v-for="(it, i) in arr" :key="i" style="margin-top: 15px">
				<view style="background-color: #fff; border-radius: 10px;position: relative;">
					<view @click="unit_price(it.id)" class="flex" style="background: #0074FE;
				border-radius: 0px 10px 0px 12px;position: absolute;top: 0;right: 0;padding: 4px 10px;">
						<text style="font-size: 11px;font-weight: 400;color: #FFFFFF;">下级单价</text>
						<u-icon name="arrow-right" color="#fff" size="11"></u-icon>
					</view>
					<view class="flex" style="justify-content: space-between; padding: 15px 0px 15px 15px">
						<view class="flex">
							<image style="width: 42px; margin-right: 10px; border-radius: 50%;height: 42px;"
								:src="$imgurl + it.logo_image" mode=""></image>
							<view>
								<view style="font-size: 14px; font-weight: bold; color: #1d1f20">{{ it.title }}</view>
								<view
									style="font-size: 12px; margin-top: 5px; font-weight: 400; color: #7d7f7f; display: flex">
									<view :class="[indexs ==0?'one flex':'two flex']" v-for="(its, indexs) in it.label"
										:key="indexs">
										<view style="margin: 0px 5px">{{ its }}</view>
										<!-- <view v-if="indexs != it.label.length - 1">|</view> -->
									</view>
								</view>
							</view>
						</view>
						<!-- <view @click="unit_price(it.id)" style="
						border-radius: 13px 0px 0px 13px;
						padding: 3px 15px;
						background-color: #ffeaea;
						color: #ff3331;
						font-size: 14px;
						font-weight: 400;
					">
					下级单价
				</view> -->
					</view>
					<view style="padding: 0 15px 15px;border-radius: 10px;">
						<view class="" style="background-color: #F7FBFF;border-radius: 10px;">
							<view style="border-top: 1px solid #f3f3f3; padding: 15px 0;">
								<view class="flex">
									<view style="width: 24%" class="tit">结算标准</view>
									<view style="width: 24%" class="tit">我的单价</view>
									<view style="width: 29%" class="tit">代理单价/比例</view>
									<!-- <view style="width: 23%" class="tit">操作</view> -->
								</view>
								<view v-for="(item, index) in it.grouplist" :key="index" class="flex"
									style="justify-content: space-between; margin-top: 15px">
									<view style="width: 24%" class="tits">{{ item.name }}</view>
									<view style="width: 24%" class="tits">{{ item.price }}元</view>
									<view style="width: 29%" class="tits">{{ item.agent_price }}/{{ item.scale }}%
									</view>
									<view style="width: 23%">
										<view @click="pricing(it.id, item)" class="price flex">
											<text>设价</text>
											<u-icon name="arrow-right" color="#FF5500" size="10"></u-icon>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup round="10" :show="show" mode="center" @close="closesss" :closeOnClickOverlay="true">
			<view style="padding: 30px 15px 15px;max-width: 300px;width: 300px;">
				<view class="" style="text-align: center;">
					<text style="font-size: 17px;font-weight: 400;color: #000000;">一键设置</text>
				</view>
				<view class="flex" style="padding-top: 20px;">
					<!-- <view style="font-size: 14px; color: #1d1f20">抽成比例：</view> -->
					<!-- <u--input type="number" v-model="percentage" :type="number" placeholder="请输入" border="none"></u--input> -->
					<u--input type="number" v-model="percentage" placeholder="请设置抽成比例" border="none"></u--input>
					<view style="font-size: 14px; color: #1d1f20">%</view>
				</view>
				<view class="flex" style="margin-top: 10px">
					<view style="font-size: 12px; color: #9ea0a0; font-weight: 400">注意：最高抽成比例</view>
					<view style="font-size: 12px; color: #ff3331">{{ info.max_scale }}%</view>
				</view>
				<view style="margin-top: 30px; padding: 0px 30px">
					<u-button @click="step" shape="circle" type="primary" text="确认设置"></u-button>
				</view>
			</view>
		</u-popup>
		<u-popup round="10" :show="shows" mode="center" @close="shows = false">
			<view style="padding: 15px; min-width: 300px; max-width: 300px">
				<view style="font-size: 16px; color: #1d1f20;text-align: center;">代理价设置</view>
				<view style="margin-top: 15px; font-size: 14px">
					我的价格
					<text style="color: #ff3331">{{ pricing_pop.price }}</text>
					元，我的抽成
					<text style="color: #ff3331">{{ (pricing_pop.price - pricing_pop.agent_price).toFixed(1) }}</text>
					元
				</view>
				<view style="border-radius: 10px; margin-top: 10px; box-sizing: border-box">
					<!-- <view class="flex"
						style="border-radius: 10px 10px 0 0; background-color: #ff3331; padding: 10px 10px">
						
						
						<view class="proportion">抽成比例</view>
					</view> -->
					<view style="padding: 27px 34px;  border-radius:10px;background-color: #F9F9F9;">
						<view class="flex"
							style="border-radius: 10px 10px 0 0; padding: 10px 0; flex-direction: column;align-items: flex-start;">
							<view style=" font-size: 14px; text-align: center;justify-content: space-between;"
								class="flex">
								<view class="proportion">结算标准</view>
								<view class="" style="color: #333333;padding-left: 35px;">
									{{ pricing_pop.name }}
								</view>
							</view>
							<view style="padding: 25px 0;" class="flex">
								<view class="proportion">代理价</view>
								<view class="flex" style="width: 50%;background-color: #FFFFFF;margin-left: 50px;">
									<u--input style="text-align: right;" @blur="blur_one" :disabled="sex != 1"
										placeholder="请输入" v-model="pricing_pop.agent_price" border="none"></u--input>
									<!-- <view style="font-size: 14px; color: #1d1f20">元</view> -->
								</view>
							</view>
							<view style="" class="flex">
								<view class="proportion">抽成比例</view>
								<view class="flex" style="width: 50%;background-color: #FFFFFF;margin-left: 35px;">
									<u--input style="text-align: right;" @blur="blur_two" :disabled="sex != 2"
										placeholder="请输入" v-model="pricing_pop.scale" border="none"></u--input>
									<!-- <view style="font-size: 14px; color: #1d1f20">%</view> -->
								</view>
							</view>
						</view>
						<view class="flex" style="border-radius: 10px 10px 0 0; padding: 10px 0;width: 100%;">
							<view style=" font-size: 14px; text-align: center" class="">设价方式</view>
							<view style="width: 60%;padding-left: 35px;">
								<uni-data-checkbox @change="change_type" v-model="sex" :localdata="sexs" />
							</view>
						</view>
					</view>
				</view>
				<view class="flex" style="padding: 30px 35px 0px;flex-direction: column;">
					<view @click="btns" style="
							padding: 10px;
							text-align: center;
							background-color: #2447FF;
							color: #ffffff;
							border-radius: 20px;
							font-size: 14px;
							width: 50%;
						">
						确定
					</view>
					<view @click="shows = false" style="
							padding: 10px;
							text-align: center;
							color: #1d1f20;
							margin-right: 10px;
							font-size: 14px;
							width: 50%;
						">
						取消
					</view>

				</view>
			</view>
		</u-popup>
		<u-popup :show="show_a" :round="10" @close="close" mode="center" :closeOnClickOverlay="true">
			<view class="conr">
				<view class="" style="padding: 60px 59px 35px 31px;">
					<text style="font-size: 20px;font-weight: 400;color: #000000;">设置提示</text>
					<view class="" style="padding-top: 51px;padding-bottom: 20px;">
						<rich-text :nodes="content"></rich-text>
					</view>
					<u-button @click="ljqw" shape="circle" type="primary" text="立即前往"></u-button>
				</view>
			</view>
		</u-popup>
		<u-popup :show="show_b" :round="10" @close="show_b = false" mode="center" :closeOnClickOverlay="true">
			<view class="conr">
				<view class="" style="padding: 60px 59px 35px 31px;">
					<text style="font-size: 20px;font-weight: 400;color: #000000;">设置提示</text>
					<view class="" style="padding-top: 51px;padding-bottom: 20px;">
						<rich-text :nodes="content_b"></rich-text>
					</view>
					<u-button @click="show_b = false" shape="circle" type="primary" text="我已知晓"></u-button>
				</view>
			</view>
		</u-popup>
		<!-- <u-modal style="text-align: center" @close="close" :closeOnClickOverlay="true" confirmColor="#fff"
			confirmButtonShape="circle" :show="show_a" :title="title" :content="content">
			<view slot="confirmButton" class="conr">
				<u-button @click="ljqw" shape="circle" type="primary" text="立即前往"></u-button>
			</view>
		</u-modal> -->

		<!-- <u-modal style="text-align: center" @close="show_b = false" :closeOnClickOverlay="true" confirmColor="#fff"
			confirmText="联系客服" confirmButtonShape="circle" :show="show_b" title="提示" :content="content_b">
			<view slot="confirmButton">
				<u-button @click="show_b = false" shape="circle" type="primary" text="我已知晓"></u-button>
			</view>
		</u-modal> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr: [],
				title: '提示',
				content: `您暂未完善个人信息，请前往完善信<br />息方便下级联系到您`,
				show_a: false,
				show: false,
				shows: false,
				sexs: [{
						text: '代理价',
						value: 1,
					},
					{
						text: '抽成比例',
						value: 2,
					},
				],
				sex: 1,
				info: '',
				percentage: '',
				pricing_pop: '',
				project_id: '',
				settlement_id: '',
				price_info: '',
				content_b: '',
				show_b: false,
				bgColor: 'rgba(255,255,255,0)',
			};
		},
		onLoad() {
			this.list();
			this.infos();
		},
		onPageScroll(e) {
			if (e.scrollTop > 50) {
				this.bgColor = 'rgba(255,255,255,1)'
			} else {
				this.bgColor = 'rgba(255,255,255,0)'
			}
		},
		methods: {
			closesss() {
				this.show = false
				// uni.navigateBack({
				// 	delta: 1
				// })
			},
			close() {
				this.show_a = false;
				// uni.switchTab({
				// 	url: '/pages/index/me'
				// })
			},
			ljqw() {
				this.show_a = false;
				uni.navigateTo({
					url: '/pages/me/edit_personal',
				});
			},
			async infos() {
				let res = await this.$http.index.my_index();
				if (res.code == 1) {
					if (res.data.userinfo.wxnum == '') {
						this.show_a = true;
					}
				}
			},
			blur_one() {
				this.pricing_pop.scale = Number(
					((this.pricing_pop.price - this.pricing_pop.agent_price) / this.pricing_pop.price) * 100
				);
				this.pricing_pop.scale = Math.floor(this.pricing_pop.scale * 10) / 10; //不四舍五入
			},
			blur_two() {
				this.pricing_pop.agent_price = Number(
					this.pricing_pop.price - (this.pricing_pop.price * this.pricing_pop.scale) / 100
				).toFixed(1);
			},
			change_type(e) {
				// console.log(e);
				// console.log(this.sex);
			},
			async btns() {
				// console.log(this.sex);
				if (this.sex == 1) {
					let res = await this.$http.car.setSettlementPrice({
						project_id: this.project_id,
						price: this.pricing_pop.agent_price,
						settlement_id: this.settlement_id,
						type: 2,
					});
					if (res.code == 1) {
						this.list();
						this.$tips(res.msg);
						this.shows = false;
					} else {
						uni.hideLoading();
						this.$tips(res.msg);
					}
				} else {
					let res = await this.$http.car.setSettlementPrice({
						project_id: this.project_id,
						price: this.pricing_pop.scale,
						settlement_id: this.settlement_id,
						type: 1,
					});
					if (res.code == 1) {
						this.list();
						this.$tips(res.msg);
						this.shows = false;
					} else {
						uni.hideLoading();
						this.$tips(res.msg);
					}
				}
			},
			//设价
			pricing(id, it) {
				this.project_id = id;
				this.settlement_id = it.id;
				this.pricing_pop = {
					...it,
				};
				// this.sex=it.type
				this.shows = true;
			},
			async step() {
				if (Number(this.percentage) < 0) {
					this.$tips('请输入正确的数字');
					return;
				}
				if (Number(this.percentage) > Number(this.info.max_scale)) {
					this.$tips('不能超过最大值');
					return;
				}
				let res = await this.$http.car.setUserPercentage({
					percentage: this.percentage,
				});
				if (res.code == 1) {
					if (res.msg == '') {
						this.$tips('设置成功');
					} else {
						this.content_b = res.msg;
						// this.$tips(res.msg)
						this.show_b = true;
					}
					this.show = false;
					setTimeout(() => {
						this.list();
					}, 1000);
				} else {
					this.$tips(res.msg);
				}
			},
			async list() {
				let res = await this.$http.car.teamPriceSetting({});
				this.arr = res.data.projectList;
				this.info = res.data;
			},
			unit_price(id) {
				uni.navigateTo({
					url: '/pages/team/unit_price?id=' + id,
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	/deep/ .checklist-group {
		flex-wrap: nowrap !important;
	}

	/deep/ .uni-data-checklist .checklist-group .checklist-box {
		margin-right: 0px !important;
		width: 100%;
	}

	/deep/ .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .radio__inner .radio__inner-icon {
		background-color: #2447FF !important;
	}

	/deep/ .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .radio__inner {
		border-color: #2447FF !important;
	}

	/deep/ .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checklist-text {
		color: #1d1f20;
	}

	.proportion {
		font-size: 14px;
		font-weight: 400;
		color: #000;
		// width: 33.33%;
		text-align: center;
	}

	/deep/ .u-button--primary {
		background-color: #2447FF;
		border-color: #2447FF;
	}

	/deep/ .u-input {
		background-color: #ffff !important;
		padding: 5px 15px !important;
		border-radius: 10px !important;
		// margin-left: 10px;
		// margin-right: 10px;
	}

	.price {
		width: 48px;
		border-radius: 5px;
		// background: #ff3331;
		color: #FF5500;
		font-size: 14px;
		font-weight: 400;
		line-height: 22px;
		text-align: center;
		margin: 0 auto;
	}

	.tits {
		font-size: 14px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #1d1f20;
		text-align: center;
	}

	.tit {
		font-size: 14px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #777979;
		text-align: center;
	}

	.one {
		background: #E8EBFC;
		border-radius: 60px 60px 60px 60px;
		color: #5C7CE4;
	}

	.two {
		background: #FEF1E3;
		border-radius: 60px 60px 60px 60px;
		color: #EBAD7E;
		margin-left: 5px;
	}

	/deep/.checklist-group {
		flex-direction: column !important;
	}

	.conr {
		background-image: url('@/static/font/61.png');
		height: 288px;
		width: 300px;
		background-size: 100% 100%;
	}
	.note {
		background-image: url('@/static/font/21.png');
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		background-size: 100% 100%;
	}
</style>
<style>
	page {
		background-color: #f7f9fa;
	}
</style>